<template>
  <!-- 登录 -->
  <div>
    <van-field v-model="account" label="账号" placeholder="账号" />
    <van-field
      v-model="password"
      type="password"
      label="密码"
      placeholder="请输入密码"
    />
    <van-field v-model="code" label="验证码" placeholder="验证码" />
    <img :src="img_url" alt="验证码" @click="Image" />
    <br /><br />
    <van-button type="primary" @click="submit">登录</van-button>
  </div>
</template>

<script>
import { v4 as uuidv4 } from "uuid";
export default {
  data() {
    return {
      account: "",
      password: "",
      code: "",
      img_url: "",
      uuid:uuidv4(),
    };
  },
  methods: {
    Image: function () {
      this.img_url = "http://127.0.0.1:8000/user/code/" + this.uuid;
      console.log("image", this.img_url);
    },
    submit: function () {
      if (this.account == "") {
        this.$toast.fail("账号不能为空");
        return false;
      }
      if (this.password == "") {
        this.$toast.fail("密码不能为空");
        return false;
      }
      this.myaxios(this.weburl + "user/login/" + this.uuid + "/", "post", {
        account: this.account,
        password: this.password,
        code: this.code,
      })
        .then((data) => {
          console.log("data", data);
          if (data.code == 200) {
            this.$toast.success(data.msg);

            // 登陆成功存储用户信息
            localStorage.setItem("token", data.token);
            localStorage.setItem("id", data.data.id);
            localStorage.setItem("account", data.data.account);
            // 登陆成功跳转首页
            this.$router.push({
              path: "/",
              query: { id: data.data.id },
            });
          }else {
            this.$toast.fali(data.msg);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  created() {
    this.Image();
  },
};
</script>

<style scoped>
</style>